<template>
  <div class="userDetailsList">
    <el-card>
      <div class="searchBox">
        <el-input
          placeholder="请输入ID"
          v-model="userId"
          maxlength="11"
          oninput="value=value.replace(/[^\d]/g,'')"
        >
          <template slot="prepend">ID</template>
        </el-input>
        <el-button class="btn" @click="SearchBtn()">查询搜索</el-button>
      </div>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="资料详情" name="1">
          <!-- 基本信息 -->
          <div class="essentialInformationBox">
            <h4>基本信息</h4>

            <div class="infoBox">
              <div class="infoBoxItem">
                <div>
                  <span>头像展示</span>
                  <div class="imgBox">
                    <img
                      :src="avatar"
                      alt=""
                      v-if="avatar !== '' && avatar !== undefined"
                      preview
                    />
                    <img
                      src="https://ui-avatars.com/api/?name=无头像&length=3&font-size=0.23"
                      alt
                      v-else
                      class="img"
                    />
                    <img
                      class="imgV"
                      src="../../assets/image/photoRealAuth.png"
                      alt=""
                      v-if="photoRealAuth == 1"
                    />
                    <span class="spanA" v-if="onlineStatus == 1"></span>
                    <span class="spanB" v-if="onlineStatus == 0"></span>
                  </div>
                </div>
                <div>
                  <span>绑定手机</span
                  ><el-input
                    v-model="mobile"
                    placeholder="绑定手机"
                    disabled
                  ></el-input>
                </div>
                <div>
                  <span>注册时间</span
                  ><el-input
                    v-model="registerTime"
                    placeholder="注册时间"
                    disabled
                  ></el-input>
                </div>

                <div>
                  <span>信誉值</span
                  ><el-input v-model="credit" placeholder="信誉值"></el-input>
                  <el-button
                    style="height: 40px; margin: 10px 0 0 20px"
                    :disabled="!userId"
                    @click="editCredit"
                    >修改</el-button
                  >
                </div>
              </div>
              <div class="infoBoxItem">
                <div>
                  <span>用户ID</span
                  ><el-input v-model="userId" disabled placeholder="用户ID">
                    ></el-input
                  >
                </div>
                <div>
                  <span>用户昵称</span
                  ><el-input
                    v-model="nickName"
                    disabled
                    placeholder="用户昵称"
                  ></el-input>
                </div>
                <div>
                  <span>用户角色</span
                  ><el-input
                    v-model="role"
                    disabled
                    placeholder="用户角色"
                  ></el-input>
                </div>
                <div>
                  <span class="span">最后登录时间</span
                  ><el-input
                    v-model="lastLoginTime"
                    disabled
                    placeholder="最后登录时间"
                  ></el-input>
                </div>
                <div>
                  <span>渠道</span
                  ><el-input
                    v-model="channel"
                    disabled
                    placeholder="渠道"
                  ></el-input>
                </div>
              </div>
              <div class="infoBoxItem">
                <div>
                  <span>性别</span>
                  <el-radio v-model="sex" label="1" disabled>男</el-radio>
                  <el-radio v-model="sex" label="2" disabled>女</el-radio>
                  <el-radio v-model="sex" label="0" disabled>未知</el-radio>
                </div>
                <div>
                  <span>版本</span
                  ><el-input
                    v-model="version"
                    disabled
                    placeholder="版本"
                  ></el-input>
                </div>
                <div>
                  <span>系统</span
                  ><el-input
                    v-model="system"
                    disabled
                    placeholder="系统"
                  ></el-input>
                </div>
                <div>
                  <span class="span">最后登录IP</span
                  ><el-input
                    v-model="ip"
                    disabled
                    placeholder="最后登录IP"
                  ></el-input>
                </div>

                <div>
                  <span class="span">邀请码</span>
                  <el-input
                    placeholder="请输入邀请码"
                    v-model="code"
                    disabled
                    oninput="value=value.replace(/[^\d]/g,'')"
                  >
                    <!-- <el-button
                  slot="append"
                  icon="el-icon-edit-outline"
                  @click="userCode"
                ></el-button> -->
                  </el-input>
                </div>
                <div>
                  <span class="span">注册来源</span
                  ><el-input
                    v-model="sources"
                    disabled
                    placeholder="注册来源"
                  ></el-input>
                </div>
              </div>
            </div>
          </div>

          <!-- 代理信息 -->
          <div class="essentialInformationBox">
            <h4>代理信息</h4>
            <div class="infoBox">
              <div
                class="infoBoxItem"
                style="display: flex; align-items: center"
              >
                <div>
                  <span>邀请码</span>
                  <el-input
                    v-model="code"
                    disabled
                    placeholder="邀请码"
                  ></el-input>
                </div>
                <div>
                  <span>绑定邀请码</span>
                  <el-input
                    v-model="BDcodeAgent"
                    disabled
                    placeholder=""
                  ></el-input>
                </div>
                <div>
                  <span>邀请人ID</span>
                  <el-input
                    v-model="YQid"
                    placeholder="邀请人id"
                    :disabled="codeAgent != '未绑定'"
                    @change="yqrId"
                  ></el-input>
                </div>
                <el-button
                  type="primary"
                  :disabled="codeAgent != '未绑定'"
                  style="margin: 10px 0 0 20px"
                  @click="binding"
                  >绑定</el-button
                >
              </div>
            </div>
          </div>
          <!-- 实名信息 -->
          <div class="essentialInformationBox">
            <h4>实名信息</h4>
            <div class="infoBox">
              <div class="infoBoxItem">
                <div>
                  <span>是否实名</span>
                  <el-input
                    v-model="isAuth"
                    disabled
                    placeholder="是否实名"
                  ></el-input>
                </div>
                <div>
                  <span>证件号码</span
                  ><el-input
                    v-model="IDCard"
                    disabled
                    placeholder="证件号码"
                  ></el-input>
                </div>
              </div>
              <div class="infoBoxItem">
                <div>
                  <span>出生年月日</span
                  ><el-input
                    v-model="birthday"
                    disabled
                    placeholder="出生年月日"
                  ></el-input>
                </div>
                <div>
                  <span>真实姓名</span
                  ><el-input
                    v-model="realName"
                    disabled
                    placeholder="真实姓名"
                  ></el-input>
                </div>
              </div>
              <div class="infoBoxItem">
                <div>
                  <span>实名认证年龄</span
                  ><el-input
                    v-model="age"
                    disabled
                    placeholder="实名认证年龄"
                  ></el-input>
                </div>
                <div>
                  <span>认证日期</span
                  ><el-input
                    v-model="authTime"
                    disabled
                    placeholder="认证日期"
                  ></el-input>
                  <el-button
                    type="success"
                    class="unbind"
                    @click="unbindBtn"
                    v-if="this.userId !== ''"
                    >解除绑定</el-button
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- VIP信息 -->
          <div class="essentialInformationBox">
            <h4>VIP信息</h4>
            <div class="infoBox">
              <div class="infoBoxItem">
                <div>
                  <span>是否VIP</span>
                  <el-input
                    v-model="isVip"
                    disabled
                    placeholder="是否VIP"
                  ></el-input>
                </div>
              </div>
              <div class="infoBoxItem">
                <div>
                  <span>首次购买时间</span
                  ><el-input
                    v-model="firstVipTime"
                    disabled
                    placeholder="首次购买时间"
                  ></el-input>
                </div>
              </div>
              <div class="infoBoxItem">
                <div>
                  <span>VIP到期时间</span
                  ><el-input
                    v-model="vipExpiredTime"
                    disabled
                    placeholder="VIP到期时间"
                  ></el-input>
                </div>
              </div>
            </div>
          </div>

          <!-- 通话信息 -->
          <!-- <div class="essentialInformationBox">
            <h4>通话信息</h4>
            <div class="infoBox">
              <div class="infoBoxItem">
                <div>
                  <span>通话次数</span>
                  <el-input
                    v-model="callCount"
                    disabled
                    placeholder="通话次数"
                  ></el-input>
                </div>
              </div>
              <div class="infoBoxItem">
                <div>
                  <span>通话总时长</span
                  ><el-input
                    v-model="callTotalTime"
                    disabled
                    placeholder="通话总时长"
                  ></el-input>
                </div>
              </div>
              <div class="infoBoxItem">
                <div>
                  <span>平均通话时长</span
                  ><el-input
                    v-model="callAvgTime"
                    disabled
                    placeholder="平均通话时长"
                  ></el-input
                  ><el-button
                    type="primary"
                    icon="el-icon-document"
                    class="infoBtn"
                    @click="callDetailLog"
                    v-if="this.userId !== ''"
                    >通话详情</el-button
                  >
                </div>
              </div>
            </div>
          </div> -->

          <!-- 第三方账号 -->
          <div class="essentialInformationBox">
            <h4>第三方账号</h4>
            <div class="infoBox">
              <div class="infoBoxItem">
                <div>
                  <span>QQ号</span>
                  <el-input v-model="qq" disabled placeholder="QQ号"></el-input>
                </div>
              </div>
              <div class="infoBoxItem">
                <div>
                  <span>微信号</span
                  ><el-input
                    v-model="wechat"
                    disabled
                    placeholder="微信号"
                  ></el-input>
                </div>
              </div>
              <div class="infoBoxItem">
                <!-- <div>
              <span>VIP到期时间</span
              ><el-input v-model="input" placeholder="请输入内容"></el-input>
            </div> -->
              </div>
            </div>
          </div>

          <!-- 资产信息 -->
          <div class="essentialInformationBox">
            <h4>资产信息</h4>
            <div class="infoBox">
              <div class="infoBoxItem" v-if="this.sex == 2">
                <div>
                  <span>宝石</span>
                  <el-input
                    v-model="diamond"
                    disabled
                    placeholder="宝石"
                  ></el-input>
                  <el-button
                    type="primary"
                    icon="el-icon-document"
                    class="infoBtn"
                    @click="walletlogDiamondLog"
                    v-if="this.userId !== ''"
                    >宝石记录</el-button
                  >
                </div>
              </div>
              <div class="infoBoxItem" v-if="this.sex == 1">
                <div>
                  <span>金币</span
                  ><el-input
                    v-model="coin"
                    disabled
                    placeholder="金币"
                  ></el-input>
                  <el-button
                    type="primary"
                    icon="el-icon-document"
                    class="infoBtn"
                    @click="walletlogCoinLog"
                    >金币记录</el-button
                  >
                </div>
              </div>
              <div class="infoBoxItem">
                <!-- <div>
              <span>VIP到期时间</span
              ><el-input v-model="input" placeholder="请输入内容"></el-input>
            </div> -->
              </div>
            </div>
          </div>

          <!-- 账号状态 -->
          <div class="essentialInformationBox">
            <h4>帐号状态</h4>
            <div class="infoBox">
              <div class="infoBoxItem">
                <div>
                  <el-input
                    v-model="status"
                    disabled
                    placeholder="帐号状态"
                  ></el-input>
                  <el-button
                    type="danger"
                    icon="el-icon-warning-outline"
                    class="infoBtn"
                    @click="userBanBtn"
                    v-if="
                      status !== '已封禁' &&
                      this.userId !== '' &&
                      status !== '已注销'
                    "
                    >封禁账号</el-button
                  >
                  <el-button
                    type="danger"
                    v-if="
                      status !== '已封禁' &&
                      this.userId !== '' &&
                      status !== '已注销'
                    "
                    class="infoBtn"
                    @click="cancellation"
                    >注销账号</el-button
                  >
                </div>
              </div>
            </div>
            <div class="infoBox" v-if="status == '已封禁'">
              <div class="infoBoxItem">
                <div>
                  <el-input
                    v-model="banReason"
                    disabled
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </div>
              <div class="infoBoxItem">
                <div>
                  <span>解封时间</span>
                  <el-input
                    v-model="enableTime"
                    disabled
                    placeholder="解封时间"
                  ></el-input>
                  <el-button
                    type="success"
                    icon="el-icon-warning-outline"
                    class="infoBtn"
                    @click="unsealBtn"
                    >立即解封</el-button
                  >
                </div>
              </div>
              <div class="infoBoxItem"></div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="通话详情" name="2">
          <!-- 通话详情弹框 -->
          <div class="timeBox">
            <el-date-picker
              v-model="callTimeDetails"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @change="focusB"
            >
            </el-date-picker>
            <el-button style="margin-left: 10px" @click="callDetailsBtn"
              >查找搜索</el-button
            >
          </div>
          <div class="conversationInfoBox">
            <p>通话总次数:{{ totalCount }}</p>
            <p>通话总时长:{{ totalTimes + "s" }}</p>
            <p>通话平均时长:{{ totalAvgTimes + "s" }}</p>
            <p v-if="sex == 1">通话总消耗金币:{{ totalMoney }}</p>
            <p v-if="sex == 2">通话总获取宝石:{{ totalMoney }}</p>
          </div>

          <el-collapse
            v-model="activeNames"
            @change="handleChange"
            class="callDetails"
            lazy
          >
            <div v-if="sex == 1">
              <el-collapse-item
                :name="item.index"
                v-for="item in tableData"
                :key="item.id"
                :title="
                  item.date +
                  '　　　　　　　　　　　　' +
                  '次数:' +
                  item.count +
                  '　　　　　　　　　' +
                  '总时长(s):' +
                  item.times +
                  's' +
                  '　　　　　　　　　' +
                  '总消耗金币:' +
                  item.total
                "
              >
                <el-table :data="item.list" style="width: 100%">
                  <el-table-column prop="date" label="时间"> </el-table-column>

                  <el-table-column prop="loginIp" label="本地通话IP">
                  </el-table-column>

                  <el-table-column prop="nickName" label="通话对象">
                  </el-table-column>

                  <el-table-column prop="oppo_user_id" label="通话对象ID">
                  </el-table-column>

                  <el-table-column prop="oppoLoginIp" label="通话对象IP">
                  </el-table-column>

                  <el-table-column prop="times" label="通话时长">
                  </el-table-column>

                  <el-table-column prop="activeTime" label="有效通话时长">
                  </el-table-column>

                  <el-table-column
                    v-if="sex == 1"
                    prop="cost_coin"
                    label="消耗金币"
                  >
                  </el-table-column>
                  <el-table-column
                    v-if="sex == 2"
                    prop="get_diamod"
                    label="获取宝石"
                  >
                  </el-table-column>
                </el-table>
              </el-collapse-item>
            </div>
            <div v-if="sex == 2">
              <el-collapse-item
                :name="item.index"
                v-for="item in tableData"
                :key="item.id"
                :title="
                  item.date +
                  '　　　　　　　　　　　　' +
                  '次数:' +
                  item.count +
                  '　　　　　　　　　' +
                  '总时长(s):' +
                  item.times +
                  's' +
                  '　　　　　　　　　' +
                  '总获取宝石:' +
                  item.total
                "
              >
                <el-table :data="item.list" style="width: 100%">
                  <el-table-column prop="date" label="时间"> </el-table-column>

                  <el-table-column prop="loginIp" label="本地通话IP">
                  </el-table-column>

                  <el-table-column prop="nickName" label="通话对象">
                  </el-table-column>

                  <el-table-column prop="oppo_user_id" label="通话对象ID">
                  </el-table-column>

                  <el-table-column prop="oppoLoginIp" label="通话对象IP">
                  </el-table-column>

                  <el-table-column prop="times" label="通话时长">
                  </el-table-column>

                  <el-table-column prop="activeTime" label="有效通话时长">
                  </el-table-column>

                  <el-table-column
                    v-if="sex == 1"
                    prop="cost_coin"
                    label="消耗金币"
                  >
                  </el-table-column>
                  <el-table-column
                    v-if="sex == 2"
                    prop="get_diamod"
                    label="获取宝石"
                  >
                  </el-table-column>
                </el-table>
              </el-collapse-item>
            </div>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="业务详情" name="3">
          <div class="searchBox1">
            <div></div>
            <div>
              <el-date-picker
                size="small"
                v-model="timeArr"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                @change="focus1"
              >
              </el-date-picker>
              <el-button
                class="btn"
                icon="el-icon-search"
                size="small"
                @click="searchBusiness"
                >查询搜索</el-button
              >
              <el-button
                icon="el-icon-paperclip"
                size="small"
                @click="businessExportExcel"
                >导出EXCEL</el-button
              >
            </div>
          </div>
          <el-table
            :data="businesstableData"
            style="width: 100%; margin-top: 10px"
            :header-cell-style="{ background: '#f5f7fa' }"
          >
            <template slot="empty">
              <el-empty :image-size="200"></el-empty>
            </template>
            <el-table-column prop="date" label="日期"> </el-table-column>
            <el-table-column prop="matching_time" label="匹配时长">
            </el-table-column>
            <el-table-column prop="valid_call_time" label="有效通话时长">
            </el-table-column>
            <el-table-column prop="trend_num" label="发布动态数">
            </el-table-column>
            <el-table-column prop="is_finish" label="业务达标">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.is_finish == '未标记'"
                  size="small"
                  type="warning"
                  plain
                  @click="businessIsFinish(scope.row.id, '2')"
                  >未达标</el-button
                >
                <el-button
                  v-if="scope.row.is_finish == '未标记'"
                  size="small"
                  type="success"
                  plain
                  @click="businessIsFinish(scope.row.id, '1')"
                  >已达标</el-button
                >
                <span v-if="scope.row.is_finish != '未标记'">{{
                  scope.row.is_finish
                }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="businessTotal"
            :page.sync="businessPage"
            :limit.sync="businessPageSize"
            @pagination="businessGetList"
          />
        </el-tab-pane>
      </el-tabs>

      <!-- 消耗流水 -->
      <el-dialog :title="title" :visible.sync="waterConsumptionDialog" center>
        <div class="conversationInfoBox">
          <p v-if="this.title == '金币流水'">总充值:{{ totalRechargeNums }}</p>
          <p v-if="this.title == '宝石流水'">总获取:{{ totalRechargeNums }}</p>
          <p>总消耗:{{ totalUseNums }}</p>
        </div>
        <div class="timeBox">
          <el-date-picker
            v-model="waterConsumptionTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="waterConsumptionPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>

          <el-button style="margin-left: 10px" @click="flowingWaterBtn"
            >查找搜索</el-button
          >
        </div>

        <el-table :data="waterConsumptionData" height="250">
          <el-table-column property="date" label="时间"></el-table-column>
          <el-table-column property="reason" label="途径"></el-table-column>
          <el-table-column property="coin" label="金币数"></el-table-column>
        </el-table>

        <div slot="footer" class="dialog-footer">
          <el-button @click="waterConsumptionDialog = false">关 闭</el-button>
        </div>
      </el-dialog>

      <!-- 封禁弹框 -->
      <el-dialog title="封禁账户" :visible.sync="dialogVisible" width="40%">
        <div class="dialogBox">
          <p>
            <span>用户ID</span>
            <el-input v-model="id" placeholder="请输入内容" disabled></el-input>
          </p>
          <p>
            <span>用户昵称</span>
            <el-input
              v-model="name"
              placeholder="请输入内容"
              disabled
            ></el-input>
          </p>
          <p>
            <span class="addRedStar">违规原因</span>
            <el-radio v-model="banReason" label="资料作假">资料作假</el-radio>
            <el-radio v-model="banReason" label="广告营销">广告营销</el-radio>
            <el-radio v-model="banReason" label="诈骗托儿">诈骗托儿</el-radio>
            <el-radio v-model="banReason" label="色情低俗">色情低俗</el-radio>
            <el-radio v-model="banReason" label="恶意骚扰">恶意骚扰</el-radio>
            <el-radio v-model="banReason" label="其他">其他</el-radio>
          </p>
          <p>
            <span class="addRedStar">封禁功能</span>
            <el-checkbox-group v-model="banType">
              <el-checkbox label="1">封禁账号</el-checkbox>
              <!-- <el-checkbox label="2">封禁匹配</el-checkbox> -->
              <!-- <el-checkbox label="3">封禁预约</el-checkbox> -->
              <!-- <el-checkbox label="4">封禁充值</el-checkbox> -->
              <!-- <el-checkbox label="5">封禁提现</el-checkbox> -->
            </el-checkbox-group>
          </p>
          <p>
            <span class="addRedStar">封禁时间</span>
            <el-radio v-model="banDays" label="1">1天</el-radio>
            <el-radio v-model="banDays" label="3">3天</el-radio>
            <el-radio v-model="banDays" label="7">7天</el-radio>
            <el-radio v-model="banDays" label="15">15天</el-radio>
            <el-radio v-model="banDays" label="30">30天</el-radio>
            <el-radio v-model="banDays" label="-1">永久</el-radio>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="banBtn">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 解封弹框 -->
      <el-dialog title="解封操作" :visible.sync="dialogVisibleB" width="40%">
        <div class="dialogBox">
          <p>
            <span>用户ID</span>
            <el-input
              v-model="idB"
              placeholder="请输入内容"
              disabled
            ></el-input>
          </p>
          <p>
            <span>用户昵称</span>
            <el-input
              v-model="nameB"
              placeholder="请输入内容"
              disabled
            ></el-input>
          </p>
          <p>
            <span>当前封禁功能</span>
            <el-checkbox-group class="jiefengGroup" v-model="banTypeB">
              <el-checkbox label="1">封禁账号</el-checkbox>
              <!-- <el-checkbox label="2">封禁匹配</el-checkbox> -->
              <!-- <el-checkbox label="3">封禁预约</el-checkbox> -->
              <!-- <el-checkbox label="4">封禁充值</el-checkbox> -->
              <!-- <el-checkbox label="5">封禁提现</el-checkbox> -->
            </el-checkbox-group>
            <span class="jiefengSpan">解封时间</span>
            <el-input
              v-model="enableTime"
              placeholder="解封时间"
              disabled
            ></el-input>
            <span class="jiefengSpan">封禁原因</span>
            <el-input
              v-model="reasonB"
              placeholder="封禁原因"
              disabled
            ></el-input>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleB = false">取 消</el-button>
          <el-button type="primary" @click="unseal">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
/* 

      <el-tab-pane label="代理详情" name="3">
          <!-- 选项卡 -->
          <div class="tabSex">
            <div class="sexBox">
              <div
                class="sex"
                :class="{ active: sexIndex == 1 }"
                @click="sexClick(1)"
              >
                男
              </div>
              <div
                class="sex"
                :class="{ active: sexIndex == 2 }"
                @click="sexClick(2)"
              >
                女
              </div>
            </div>

            <div>
              <span style="margin-right: 10px">拉新时间</span>
              <el-date-picker
                v-model="DLtime"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
              <el-button style="margin-left: 10px">搜索</el-button>
            </div>
          </div>
          <div class="data">
            <span> 拉新人数: 0</span>
            <span> 金币收益: 0</span>
          </div>
          <!-- 男 -->
          <div v-if="sexIndex == 1">
            <el-table :data="manTableData" style="width: 100%">
              <el-table-column prop="date" label="时间" width="180">
              </el-table-column>
              <el-table-column prop="name" label="拉新人id" width="180">
              </el-table-column>
              <el-table-column prop="address" label="拉入新人">
              </el-table-column>
              <el-table-column prop="address" label="充值金额">
              </el-table-column>
              <el-table-column prop="address" label="获得宝石收益">
              </el-table-column>
            </el-table>
          </div>
          <!-- 女 -->
          <div v-if="sexIndex == 2">
            <!-- <el-table :data="girlTableData" style="width: 100%">
              <el-table-column prop="date" label="时间" width="180">
              </el-table-column>
              <el-table-column prop="name" label="拉入新人ID" width="180">
              </el-table-column>
              <el-table-column prop="address" label="新人昵称">
              </el-table-column>
              <el-table-column prop="address" label="关系"> </el-table-column>
              <el-table-column prop="address" label="提现宝石数">
              </el-table-column>
              <el-table-column prop="address" label="获得宝石收益">
              </el-table-column>
              <el-table-column prop="address" label="妹妹个数">
              </el-table-column>
              <el-table-column prop="address" label="妹妹列表">
              </el-table-column>
            </el-table> -->

            <el-table
              :data="tableData1"
              style="width: 100%"
              row-key="id"
              lazy
              :load="load"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
            </el-table>
          </div>
        </el-tab-pane> */
import {
  userUserDetail,
  callDetailLog,
  walletlogCoinLog,
  walletlogDiamondLog,
  userBan,
  userUnbundling,
  BindCodeBind,
  userCancel,
  userEditCredit,
  userBusinessDetails,
  userBusinessIsFinish,
  // userCode,
} from "@/api/UserManagement";
// 女 宝石记录     男 金币记录
import Pagination from "@/components/Pagination"; // 分页
export default {
  inject: ["reload"],
  components: { Pagination },
  data() {
    return {
      sources: "", //注册来源
      sexIndex: 1,
      DLtime: "",
      BDcodeAgent: "", //代理邀请码
      YQid: "", //邀请id
      activeNames: ["1"],
      date: "", //日期
      count: "", //总次数
      times: "", //总时长
      avgTimes: "", //时长
      userId: "", //
      avatar: "", //头像
      nickName: "", //昵称
      sex: "", //1.男 2.女
      version: "", //版本
      mobile: "", //手机号
      role: "", //角色
      system: "", //系统
      channel: "", //渠道
      registerTime: "", //注册时间
      credit: "", //信誉值
      lastLoginTime: "", //上次登录时间
      isAuth: "", //实名状态
      realName: "", //姓名
      IDCard: "", //身份证
      age: "", //年龄
      authTime: "", //认证时间
      birthday: "", //生日
      isVip: "", //是否vip 1是 0否
      vipExpiredTime: "", //vip过期时间
      firstVipTime: "", //第一次购买vip时间
      qq: "", //QQ号
      wechat: "", //微信号
      diamond: "", //宝石数量
      coin: "", //金币数
      status: "", //账号状态 0.正常 1.封禁 2.删除
      enableTime: "", //解封时间
      callCount: "", //通话次数
      callTotalTime: "", //通话时长 单位秒
      callAvgTime: "", //平均时长 单位秒
      banReason: "", //封禁原因
      photoRealAuth: "", //认证LOGO
      onlineStatus: "", //在线与否

      id: "",
      ip: "",
      code: "",
      // name: "",
      totalCount: "",
      totalTimes: "",
      totalAvgTimes: "",
      callTimeDetails: "", //时间查询
      callTimeDetailsStartDate: "", //开始时间
      callTimeDetailsEndDate: "", //结束时间
      input: "",
      radio: "1",
      tableData: [],
      manTableData: [],
      // girlTableData: [],
      tableData1: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市江路 1519 弄",
          hasChildren: true,
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          children: [
            {
              id: 41,
              date: "2016-05-01",
              name: "王小虎",
              address: "1 1519 弄",
            },
            {
              id: 42,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海 1519 弄",
            },
          ],
        },
      ],

      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      //业务详情
      timeArr: [],
      businessStartTime: "",
      businessEndTime: "",
      businesstableData: [],
      businessTotal: 0,
      businessPage: 1,
      businessPageSize: 10,
      // 消耗流水弹框
      title: "金币流水",
      totalRechargeNums: "", //总充值
      totalUseNums: "", //总消耗
      waterConsumptionData: [],
      waterConsumptionDialog: false, //消耗流水
      waterConsumptionPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      codeAgent: "",
      waterConsumptionTimeValStartDate: "",
      waterConsumptionTimeValEndDate: "",
      waterConsumptionTimeVal: "", //消耗流水日期

      // 封禁弹框
      dialogVisible: false,
      id: "",
      name: "",
      banReason: "", //违规原因
      banType: ["1"], //封禁功能
      banDays: "", //封禁时间

      // 解封弹框
      dialogVisibleB: false,
      idB: "",
      nameB: "",
      banTypeB: ["1"],
      reasonB: "",
      dayB: "",

      activeName: "1",
    };
  },
  methods: {
    load(tree, treeNode, resolve) {
      console.log(tree + "tree");
      console.log(treeNode + "treeNode");
      console.log(resolve + "resolve");
    },
    // 男女切换选项卡
    sexClick(num) {
      this.sexIndex = num;
    },
    binding() {
      // console.log(this.id,this.BDcodeAgent);
      BindCodeBind({ user_id: this.id, code: this.BDcodeAgent }).then((res) => {
        // console.log(res);
        if (res.code == 0) {
          this.userUserDetail();
        }
      });
    },
    yqrId() {
      if (this.YQid != "") {
        // console.log(this.YQid);
        userUserDetail({
          userId: this.YQid,
        }).then((res) => {
          // console.log(res);
          this.BDcodeAgent = res.data.code;
          if (code == 0) {
          }
        });
      }
    },
    // 注销账号按钮
    cancellation() {
      this.$confirm("此操作将注销该账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(this.id);
          userCancel({
            id: this.id,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "注销成功!",
              });
              this.$router.push("/UserManagement/UserManagementList");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //修改信誉值
    editCredit() {
      this.$confirm("是否修改该用户信誉值？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await userEditCredit({
            user_Id: this.userId,
            credit: this.credit,
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
          }
          this.SearchBtn();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
          this.SearchBtn();
        });
    },
    handleChange(val) {
      // console.log(val);
    },
    //用户详情
    userUserDetail() {
      if (this.$route.query.id == undefined) {
        // console.log(this.avatar);
      } else {
        userUserDetail({
          userId: this.$route.query.id,
        }).then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.codeAgent = res.data.codeAgent;
            this.userId = res.data.userId;
            this.avatar = res.data.avatar;
            this.nickName = res.data.nickName;
            this.sex = res.data.sex;
            this.version = res.data.version;
            this.mobile = res.data.mobile;
            this.role = res.data.role;
            this.system = res.data.system;
            this.channel = res.data.channel;
            this.registerTime = res.data.registerTime;
            this.lastLoginTime = res.data.lastLoginTime;
            this.isAuth = res.data.isAuth;
            this.realName = res.data.realName;
            this.IDCard = res.data.IDCard;
            this.age = res.data.age;
            this.authTime = res.data.authTime;
            this.birthday = res.data.birthday;
            this.isVip = res.data.isVip;
            this.vipExpiredTime = res.data.vipExpiredTime;
            this.firstVipTime = res.data.firstVipTime;
            this.qq = res.data.qq;
            this.wechat = res.data.wechat;
            this.diamond = res.data.diamond;
            this.coin = res.data.coin;
            this.status = res.data.status;
            this.enableTime = res.data.enableTime;
            this.callCount = res.data.callCount;
            this.callTotalTime = res.data.callTotalTime;
            this.callAvgTime = res.data.callAvgTime;
            this.banReason = res.data.banReason;
            this.credit = res.data.credit;
            this.id = res.data.id;
            this.ip = res.data.ip;
            this.photoRealAuth = res.data.photoRealAuth;
            this.onlineStatus = res.data.onlineStatus;
            this.code = res.data.code;
            this.YQid = res.data.bindId;
            this.BDcodeAgent = res.data.bindCode;
            this.sources = res.data.sources;

            if (this.status == 0) {
              this.status = "正常";
            } else if (this.status == 1) {
              this.status = "已封禁";
            } else if (this.status == 2) {
              this.status = "已注销";
            }
            if (this.isVip == 0) {
              this.isVip = "否";
            } else {
              this.isVip = "是";
              s;
            }
          }
          // console.log(this.userId, this.code);
          // BindCodeBind({
          //   user_id: this.userId,
          //   code: this.code,
          // })
          //   .then((res) => {
          //     console.log(res);
          //   })
          //   .catch((err) => {
          //     console.log(err);
          //   });
        });
        // console.log(this.userId);
      }
    },
    // 查询搜索
    SearchBtn() {
      if (!this.userId) {
        this.$message({
          type: "error",
          message: "搜索ID不能为空！",
        });
        return;
      }
      userUserDetail({
        userId: this.userId || "",
      }).then((res) => {
        if (res.code == 0) {
          this.userId = res.data.userId;
          this.avatar = res.data.avatar;
          this.nickName = res.data.nickName;
          this.sex = res.data.sex;
          this.version = res.data.version;
          this.mobile = res.data.mobile;
          this.role = res.data.role;
          this.system = res.data.system;
          this.channel = res.data.channel;
          this.registerTime = res.data.registerTime;
          this.lastLoginTime = res.data.lastLoginTime;
          this.isAuth = res.data.isAuth;
          this.realName = res.data.realName;
          this.IDCard = res.data.IDCard;
          this.age = res.data.age;
          this.authTime = res.data.authTime;
          this.birthday = res.data.birthday;
          this.isVip = res.data.isVip;
          this.vipExpiredTime = res.data.vipExpiredTime;
          this.firstVipTime = res.data.firstVipTime;
          this.qq = res.data.qq;
          this.wechat = res.data.wechat;
          this.diamond = res.data.diamond;
          this.coin = res.data.coin;
          this.status = res.data.status;
          this.enableTime = res.data.enableTime;
          this.callCount = res.data.callCount;
          this.callTotalTime = res.data.callTotalTime;
          this.callAvgTime = res.data.callAvgTime;
          this.banReason = res.data.banReason;
          this.photoRealAuth = res.data.photoRealAuth;
          this.credit = res.data.credit;
          this.id = res.data.id;
          this.ip = res.data.ip;
          this.code = res.data.code;
          this.onlineStatus = res.data.onlineStatus;
          this.YQid = res.data.bindId;
          this.BDcodeAgent = res.data.bindCode;
          this.codeAgent = res.data.codeAgent;
          this.sources = res.data.sources;

          if (this.status == 0) {
            this.status = "正常";
          } else if (this.status == 1) {
            this.status = "已封禁";
          } else {
            this.status = "已注销";
          }
          if (this.isVip == 0) {
            this.isVip = "否";
          } else {
            this.isVip = "是";
          }
        }
      });
      if (this.userId != "") {
        callDetailLog({
          userId: this.userId || "",
          startTime: "",
          endTime: "",
        }).then((res) => {
          if (res.code == 0) {
            this.tableData = res.data.list;
            this.totalCount = res.data.totalCount;
            this.totalTimes = res.data.totalTimes;
            this.totalAvgTimes = res.data.totalAvgTimes;
            this.totalMoney = res.data.totalMoney;
          }
          if (res.code == 2000) {
            this.$message.error("请输入用户id");
          }
        });
      } else {
        this.$message.error("请输入用户id");
      }
      this.businessPage = 1;
      this.businessStartTime = "";
      this.businessEndTime = "";
      this.timeArr = [];
      this.businessGetList();
    },
    //认证解除绑定
    unbindBtn() {
      this.$confirm("此操作将解绑该用户的实名认证, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userUnbundling({
            id: this.id,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "解绑操作成功!",
              });
              this.reload();
            }
            // if (res.code == 4101) {
            //   Message({
            //     message: "用户未绑定认证",
            //     type: "error",
            //     duration: 5 * 1000,
            //   });
            // }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解绑操作",
          });
        });
    },
    //通话详情
    // callDetailLog() {
    //   this.dialogTableVisible = true;
    //   callDetailLog({
    //     userId: this.userId,
    //     startTime: "",
    //     endTime: "",
    //   }).then((res) => {
    //     if (res.code == 0) {
    //       this.tableData = res.data.list;
    //       this.totalCount = res.data.totalCount;
    //       this.totalTimes = res.data.totalTimes;
    //       this.totalAvgTimes = res.data.totalAvgTimes;
    //       this.totalMoney = res.data.totalMoney;
    //     }
    //   });
    // },
    // 通话查询
    callDetailsBtn() {
      if (this.userId == "") {
        this.$message.error("请输入用户id");
      } else {
        callDetailLog({
          userId: this.userId || "",
          startTime: this.callTimeDetailsStartDate,
          endTime: this.callTimeDetailsEndDate,
        }).then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.tableData = res.data.list;
            this.totalCount = res.data.totalCount;
            this.totalTimes = res.data.totalTimes;
            this.totalAvgTimes = res.data.totalAvgTimes;
            this.totalMoney = res.data.totalMoney;
          }
        });
      }
    },
    //金币流水
    walletlogCoinLog() {
      this.waterConsumptionDialog = true;
      this.title = "金币流水";
      walletlogCoinLog({
        startTime: "",
        endTime: "",
        userId: this.userId,
      }).then((res) => {
        if (res.code == 0) {
          this.totalRechargeNums = res.data.totalRechargeNums;
          this.totalUseNums = res.data.totalUseNums;
          this.waterConsumptionData = res.data.list;
        }
      });
    },
    //宝石流水
    walletlogDiamondLog() {
      this.waterConsumptionDialog = true;
      this.title = "宝石流水";
      walletlogDiamondLog({
        startTime: "",
        endTime: "",
        userId: this.userId,
      }).then((res) => {
        if (res.code == 0) {
          this.totalRechargeNums = res.data.totalRechargeNums;
          this.totalUseNums = res.data.totalUseNums;
          this.waterConsumptionData = res.data.list;
        }
      });
    },
    //流水搜索
    flowingWaterBtn() {
      if (this.title == "金币流水") {
        walletlogCoinLog({
          startTime: this.waterConsumptionTimeValStartDate,
          endTime: this.waterConsumptionTimeValEndDate,
          userId: this.userId,
        }).then((res) => {
          if (res.code == 0) {
            this.totalRechargeNums = res.data.totalRechargeNums;
            this.totalUseNums = res.data.totalUseNums;
            this.waterConsumptionData = res.data.list;
          }
        });
      } else {
        walletlogDiamondLog({
          startTime: this.waterConsumptionTimeValStartDate,
          endTime: this.waterConsumptionTimeValEndDate,
          userId: this.userId,
        }).then((res) => {
          if (res.code == 0) {
            this.totalRechargeNums = res.data.totalRechargeNums;
            this.totalUseNums = res.data.totalUseNums;
            this.waterConsumptionData = res.data.list;
          }
        });
      }
    },
    //时间
    focus(time) {
      if (!this.waterConsumptionTimeVal) {
        this.waterConsumptionTimeVal = [];
      }
      this.waterConsumptionTimeValStartDate = this.waterConsumptionTimeVal[0];
      this.waterConsumptionTimeValEndDate = this.waterConsumptionTimeVal[1];
    },
    focus1(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.businessStartTime = this.timeArr[0];
      this.businessEndTime = this.timeArr[1];
    },
    //通话详情查询
    focusB(time) {
      if (!this.callTimeDetails) {
        this.callTimeDetails = [];
      }
      this.callTimeDetailsStartDate = this.callTimeDetails[0];
      this.callTimeDetailsEndDate = this.callTimeDetails[1];
    },
    //封禁
    userBanBtn() {
      this.dialogVisible = true;
      this.id = this.userId;
      this.name = this.nickName;
    },
    banBtn() {
      if (this.banType && this.banReason && this.banDays !== "") {
        userBan({
          id: this.id,
          ban: 1,
          banType: this.banType, //封禁类型 0未封禁 1.封禁账号 2.封禁匹配 3.封禁预约
          reason: this.banReason, //封禁原因类型
          day: this.banDays, //封禁天数
        }).then((res) => {
          if (res.code == 0) {
            this.dialogVisible = false;
            this.$message({
              message: "封禁成功",
              type: "success",
            });
            // this.reload();
            this.SearchBtn();
          }
        });
      } else {
        this.$message({
          message: "必填封禁选项",
          type: "warning",
        });
      }
    },
    //解封
    unsealBtn() {
      this.dialogVisibleB = true;
      this.idB = this.userId;
      this.nameB = this.nickName;
      this.banTypeB = this.banType; //封禁类型 0未封禁 1.封禁账号 2.封禁匹配 3.封禁预约
      this.reasonB = this.banReason; //封禁原因类型
      this.dayB = this.banDays; //封禁天数
    },
    unseal() {
      userBan({
        id: this.idB,
        ban: 0,
        banType: this.banTypeB, //封禁类型 0未封禁 1.封禁账号 2.封禁匹配 3.封禁预约
        reason: this.reasonB, //封禁原因类型
        day: this.enableTime, //封禁天数
      }).then((res) => {
        if (res.code == 0) {
          this.dialogVisibleB = false;
          this.$message({
            message: "解封成功",
            type: "success",
          });
          // this.reload();
          this.SearchBtn();
        }
      });
    },
    //修改邀请码
    // userCode() {
    //   userCode({
    //     id: this.userId,
    //     code: this.code,
    //   }).then((res) => {
    //     if (res.code == 0) {
    //       this.$message({
    //         message: "修改成功",
    //         type: "success",
    //       });
    //       this.reload();
    //     }
    //   });
    // },
    //选项卡
    handleClick(tab) {
      // console.log(tab.name);
      if (tab.name == 2) {
        if (this.userId != "") {
          callDetailLog({
            userId: this.userId || "",
            startTime: "",
            endTime: "",
          }).then((res) => {
            if (res.code == 0) {
              this.tableData = res.data.list;
              this.totalCount = res.data.totalCount;
              this.totalTimes = res.data.totalTimes;
              this.totalAvgTimes = res.data.totalAvgTimes;
              this.totalMoney = res.data.totalMoney;
            }
          });
        } else {
          this.$message.error("请输入用户id");
        }
      }
      if (tab.name == 3) {
        if (this.userId) {
          this.businessGetList();
        }
      }
    },
    //业务详情列表查询
    async businessGetList() {
      const res = await userBusinessDetails({
        page: this.businessPage,
        pageSize: this.businessPageSize,
        startTime: this.businessStartTime,
        endTime: this.businessEndTime,
        user_Id: this.userId,
      });
      if (res.code == 0) {
        this.businessTotal = parseInt(res.data.count);
        this.businesstableData = res.data.list;
        this.businesstableData.forEach((item) => {
          if (item.is_finish == 0) {
            item.is_finish = "未标记";
          }
          if (item.is_finish == 1) {
            item.is_finish = "已达标";
          }
          if (item.is_finish == 2) {
            item.is_finish = "未达标";
          }
        });
      }
    },
    searchBusiness() {
      this.businessPage = 1;
      this.businessGetList();
    },
    //标记业务达标
    businessIsFinish(id, is_finish) {
      this.$confirm("是否标记该条记录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await userBusinessIsFinish({
            id,
            is_finish,
            user_Id: this.userId,
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.businessGetList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    //导出功能
    async businessExportExcel() {
      const res = await userBusinessDetails({
        page: 1,
        pageSize: 1000,
        startTime: this.businessStartTime,
        endTime: this.businessEndTime,
        user_Id: this.userId,
      });
      res.data.list.forEach((item) => {
        if (item.is_finish == 0) {
          item.is_finish = "未标记";
        }
        if (item.is_finish == 1) {
          item.is_finish = "已达标";
        }
        if (item.is_finish == 2) {
          item.is_finish = "未达标";
        }
      });
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
        const tHeader = [
          "日期",
          "匹配时长",
          "有效通话时长",
          "发布动态数",
          "业务达标",
        ]; // 上面设置Excel的表格第一行的标题
        const filterVal = [
          "date",
          "matching_time",
          "valid_call_time",
          "trend_num",
          "is_finish",
        ]; // 上面的index、nickName、name是tableData里对象的属性key值
        const list = res.data.list; //把要导出的数据tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "用户业务详情"); //最后一个是表名字
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
  created() {
    this.userUserDetail();
    // console.log(this.userId, this.code);
    this.userId = this.$route.query.id;
    // console.log(this.userId);
  },
  // this.$route.query.id
};
</script>

<style lang="less" scoped>
.data {
  margin: 40px 0 40px 40px;
  span {
    font-size: 20px;
    font-weight: bold;
    margin-right: 80px;
  }
}
.tabSex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
  margin-bottom: 20px;
  margin-right: 20px;
  .sexBox {
    display: flex;
    align-items: center;
  }
  .sex {
    padding: 10px 30px;
    margin-left: 5px;
    border: 1px solid #eee;
    border-radius: 10px;
  }
  .active {
    color: #fff;
    background-color: #6490d5;
  }
}
.agent {
  display: flex;
  justify-content: end;
  div {
    span {
      margin-right: 10px;
      color: #666;
    }
  }
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.userDetailsList {
  margin: 30px;
  height: 100%;

  .searchBox {
    display: flex;
    margin-bottom: 20px;
    .el-input {
      width: 240px;
      margin-right: 10px;
    }
  }
  .essentialInformationBox {
    .infoBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .infoBoxItem {
        width: 40%;
        .imgBox {
          position: relative;

          .imgV {
            width: 26px;
            height: 26px;
            position: absolute;
            top: -6px;
            right: -13px;
          }
          .img {
            width: 70px;
            height: 70px;
            border-radius: 10px;
          }
          .spanA {
            width: 14px;
            height: 14px;
            background: #0df534;
            display: inline-block;
            border-radius: 7px;
            position: absolute;
            bottom: 1px;
            right: -5px;
          }
          .spanB {
            width: 14px;
            height: 14px;
            background: #ccc;
            display: inline-block;
            border-radius: 7px;
            position: absolute;
            bottom: 1px;
            right: -5px;
          }
        }
        div {
          display: flex;
          margin-top: 10px;
          span {
            width: 120px;
            line-height: 60px;
            text-align: center;
          }
          .el-input {
            width: 220px;
          }
          img {
            width: 120px;
            height: 120px;
            border-radius: 4px;
          }
          .infoBtn {
            margin-left: 10px;
            height: 40px;
            margin-top: 10px;
          }
          .el-radio {
            line-height: 60px;
          }
          .unbind {
            margin-left: 10px;
            height: 40px;
            margin-top: 10px;
          }
        }
      }
    }
  }
  .el-dialog {
    .conversationInfoBox {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      font-size: 16px;
    }
    .timeBox {
      display: flex;
      justify-content: flex-end;
      margin: 20px 0px;
    }
    .callDetails {
      height: 400px;
      overflow-y: auto;
      span {
        margin-left: 30px;
        font-size: 14px;
        line-height: 40px;
      }
      .span {
        width: 300px;
        text-align: center;
        margin-right: 30px;
      }
    }
  }
  .conversationInfoBox {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    p {
      padding: 0 30px;
    }
  }
  .timeBox {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0px;
  }
  .callDetails {
    height: 400px;
    overflow-y: auto;
    span {
      margin-left: 30px;
      font-size: 14px;
      line-height: 40px;
    }
    .span {
      width: 300px;
      text-align: center;
      margin-right: 30px;
    }
  }
  .el-table {
    height: 400px !important;
    overflow: auto;
  }
  .dialogBox {
    p {
      display: flex;
      span {
        width: 100px;
        line-height: 40px;
      }
      .el-radio,
      .el-checkbox-group {
        line-height: 40px;
      }
      .el-input {
        width: 200px;
      }
      .jiefengSpan {
        text-align: right;
        margin-right: 10px;
      }
      .jiefengGroup {
        margin-left: 10px;
      }
    }
  }
  .addRedStar:before {
    content: "*";
    color: red;
    font-size: 18px;
  }
  .searchBox1 {
    display: flex;
    justify-content: space-between;
  }
}
</style>